<template>
    <div class="login_container">
        <div class="login_box">
            <el-form :model="loginForm" ref="loginFormRef" label-width="60px" class="login_form" :rules="loginRules">
                <el-form-item label="账号" class="item" prop="username">
                    <el-input class="item_input" size="mini" v-model="loginForm.username" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
                </el-form-item>
                <el-form-item label="密码" class="item" prop="password">
                    <el-input class="item_input" size="mini" v-model="loginForm.password" show-password placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button class="login_btn" type="primary" size="mini" round @click="login">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default{
    data(){
        return{
            loginForm:{
                username:'',
                password:''
            },
            loginRules:{
                username:[
                    {required:true,message:'请输入账号',trigger:'blur'}
                ],
                password:[
                    {required:true,message:'请输入密码',trigger:'blur'}
                ]
            }
        }
    },
    methods:{
        login(){
            this.$refs.loginFormRef.validate(async valid=>{
                if(valid){
                    const {data:res} = await this.$http.post('/login',this.loginForm);
                    if(res.code === 200){
                        this.$message.success(res.message);
                        this.$router.push({path:'/home'});
                        window.sessionStorage.setItem('user',JSON.stringify(res.data));
                    }else{
                        this.$message.error(res.message);
                    }
                }else{
                    return;
                }
            })
        }   
    }
}
</script>
<style lang="less" scoped>
.login_container{
    background: url('../assets/background.png');
    margin: 0;
    padding: 0;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    .login_box{
        width: 300px;;
        height: auto;
        background: rgba(255, 255, 255, 0.567);
        border-radius: 5px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        padding: 10px;
        box-sizing: border-box;
        .login_form{
            .item{
                height: 30px;
               .item_input{
               }
            }
            .login_btn{
                width: 80%;
                
            }
        }


    }
}

</style>